<template>
  <el-dialog
    title="注册审核"
    :visible.sync="applyVisible"
    width="1200px"
    :close-on-click-modal="false"
  >
    <template v-if="typeOptions.length === 0">
      <el-alert title="温馨提示" type="error">
        <p style="margin: 0;font-size: 16px;">
          驳回理由未配置数据项！<el-button
            type="text"
            @click="toPage"
            >去配置</el-button
          >
        </p>
      </el-alert>
    </template>

    <el-card class="mo-box">
      <div slot="header" class="clearfix">
        <span class="front-title">注册信息</span>
      </div>
      <table class="custom-table">
        <tr>
          <td class="tr-title">登录账号</td>
          <td>{{ items.account }}</td>
          <td class="tr-title">公司名称</td>
          <td>{{ items.name }}</td>
          <td class="tr-title">统一社会信用代码</td>
          <td>{{ items.licenseNo }}</td>
        </tr>
        <tr>
          <td class="tr-title">联系人姓名</td>
          <td>{{ items.contactPerson }}</td>
          <td class="tr-title">联系电话</td>
          <td>{{ items.contactPhone }}</td>
          <td class="tr-title">注册邮箱</td>
          <td>{{ items.email }}</td>
        </tr>
        <tr>
          <td class="tr-title">公司实际办公地址</td>
          <td colspan="3">{{ items.businessAddresss }}</td>
          <td class="tr-title">注册时间</td>
          <td>{{ items.createTime | filterTime }}</td>
        </tr>
        <tr>
          <td class="tr-title">公司简介</td>
          <td colspan="5">{{ items.descr }}</td>
        </tr>
        <tr>
          <td class="tr-title">营业执照</td>
          <td colspan="5">
            <div class="duo-file">
              <label v-for="(file, index) in items.licenseFile" :key="index">
                <template v-if="isImage(file)">
                  <el-image
                    style="width: 40px; height: 40px;margin-right: 6px"
                    :src="file"
                    :preview-src-list="[file]"
                    fit="cover"
                  ></el-image>
                </template>
                <template v-else-if="isPDF(file)">
                  <a :href="file" target="_blank"
                    ><img
                      style="width: 40px; height: 40px;margin-right: 6px"
                      src="~@/assets/pdf_file.png"
                  /></a>
                </template>
              </label>
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <el-form :model="applyForm" ref="applyForm">
      <el-form-item
        label="审核意见"
        prop="statusFlag"
        :rules="[
          { required: true, message: '请选择审核意见', trigger: 'change' }
        ]"
      >
        <el-radio-group v-model="applyForm.statusFlag">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="驳回理由"
        prop="errorType"
        :rules="[
          { required: vildFlag, message: '请选择驳回理由', trigger: 'change' }
        ]"
      >
        <el-select
          v-model="applyForm.errorType"
          style="width:100%"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in typeOptions"
            :key="index"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          placeholder="请输入"
          type="textarea"
          :rows="3"
          v-model="applyForm.remarks"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="applyVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submitAddly('applyForm')"
        >提交</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import {
  supplierDetail,
  supplierRegCheck
} from "@/api/supplier_api";
import { getDetailByKey } from "@/api/about_api";
import moment from "moment";
export default {
  data() {
    return {
      typeOptions: [],
      vildFlag: false,
      applyVisible: false,
      items: {},
      applyForm: {
        statusFlag: 1,
        remarks: "",
        errorType: "",
        id: ""
      }
    };
  },
   filters: {
    filterTime(val) {
      if (!val) {
        return;
      }
      return moment(val).format("YYYY-MM-DD  HH:mm:ss"); 
    }
  },
  watch: {
    "applyForm.statusFlag"(newValue, oldValue) {
      this.vildFlag = newValue == 1 ? false : true;
      if (newValue == 1) {
        this.applyForm.remarks = "";
        this.applyForm.errorType = "";
      }
    },
    deep: true
  },
  methods: {
    openForm(row) {
      this.applyForm.id = row.id;
      this.applyForm.statusFlag = 1;
      this.applyForm.remarks = "";
      this.applyForm.errorType = "";
      this.getInfo();
      this.getInfoDetail(row);
    },
    async getInfo() {
        const { code, data } = await getDetailByKey("zcbh");
      if (code === 200) {
        if (data && data.value) {
            this.typeOptions = JSON.parse(data.value);
        }
      }
    },
     async getInfoDetail(row) {
       const { code, data } = await supplierDetail({ id: row.id });
      this.applyVisible = true;
      if (code == 200) {
        if (data && data.licenseFile) {
          data.licenseFile = data.licenseFile.split(",");
        }
        this.items = data;
      }
    },
    isImage(file) {
      return /\.(jpg|jpeg|png|gif|webp)$/i.test(file);
    },
    isPDF(file) {
      return /\.pdf$/i.test(file);
    },
    toPage() {
      this.$router.push("/supplier/rejection/reg");
    },
    submitAddly(formName) {
      let that = this;
      this.$refs[formName].validate(async valid => {
        if (valid) {
          // if (this.applyForm.statusFlag == 1) {
          //   this.applyForm.remarks = "";
          //   this.applyForm.errorType = "";
          // }
          const { code, msg } = await supplierRegCheck(this.applyForm);
          if (code === 200) {
            this.$confirm("操作成功，短信已发送供应商。", "温馨提示", {
              confirmButtonText: "关闭",
              cancelButtonText: "取消",
              showCancelButton: false,
              type: "success"
            })
              .then(() => {
                  that.applyVisible = false;
                that.$emit('onOk',true)
              })
              .catch(() => {
                that.applyVisible = false;
                that.$emit('onOk',true)
              });
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.mo-box{
  margin-bottom: 25px;
}
</style>
